<template>
    <div class="main_div">
        <a-layout class="layout_box">
            <a-layout-header class="header_box">
                <header-component></header-component>
            </a-layout-header>
            <a-layout>
                <a-layout-sider width="200" style="background: #fff">
                    <a-menu mode="inline" theme="dark" :openKeys="openKeys" @openChange="onOpenChange" style="width: 256px" class="tree_box">
                        <a-sub-menu :key="parent.menuId" v-for="parent in menuTree">
                            <span slot="title">
                                <i class="iconfont tree_icon" :class="parent.iconCls==null?'el-icon-setting':parent.iconCls"></i>
                                <span>{{parent.menuName}}</span>
                            </span>
                            <a-menu-item :key="child.menuId" v-for="child in parent.children" @click="handleRouter(child.routerPath)">{{child.menuName}}</a-menu-item>
                        </a-sub-menu>
                    </a-menu>
                </a-layout-sider>
                <a-layout-content>
                    <router-view></router-view>
                </a-layout-content>
            </a-layout>
        </a-layout>
    </div>
</template>

<script>
    import HeaderComponent from './HeaderComponent'
  export default {
    components:{
      HeaderComponent,
    },
    data() {
      return{
        collapsed: false,
        menuId:'',
        menuTree:[],
        rootSubmenuKeys: [],
        openKeys: [],
      }
    },
    created() {
      this.menuTreeWithRole()
    },
    methods: {
      // 获取菜单列表
      menuTreeWithRole() {
        let self = this
        self.$axios.post('commonRest/menuAllTreeWithRole',{id:''}).then(res => {
          self.menuTree = res.data
          self.menuTree.forEach(item => {
            self.rootSubmenuKeys.push(item.menuId)
          })
        })
      },
      // 菜单展开关闭
      onOpenChange (openKeys) {
        const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
        if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
          this.openKeys = openKeys
        } else {
          this.openKeys = latestOpenKey ? [latestOpenKey] : []
        }
      },
      handleRouter(router) {
        this.$router.push(router)
      }
    },
  }
</script>

<style lang="scss">
    .main_div{
        .layout_box{
            width:100%;
            height:100vh;
            .header_box{
                background: #fff;
                padding:0;
                height:60px;
                line-height: 60px;
            }
            .ant-layout-sider{
                height:100%;
                .tree_box{
                    height:100%;
                    overflow-y: auto;
                    overflow-x: hidden;
                    background-color: #0C6D95;
                    color:#fff;
                    width:200px !important;
                    .ant-menu{
                        background-color: #0C6D95;
                        box-shadow:none;
                        .ant-menu-item{
                            color:#fff;
                        }
                    }
                    .tree_icon{
                        padding-right:20px;
                    }
                }
            }
            .ant-layout-content{
                padding:20px;
                text-align: left;
            }
        }
    }
</style>